<template>
  <!-- 
  父组件调用该组件时传入的自定义属性会被vue进行分解
    1. 被props定义拦截的属性，会出现当前组件的 props仓库中供使用
    2. 没有被props定义拦截的属性，会出现在$attrs对象中，用于继续向内部进行传递(属性透传)
  -->
  <el-dialog v-bind="$attrs" v-on="$listeners">
    <pre>{{ params }}</pre>
    <el-form ref="form" :model="params" :rules="courseRules" label-width="100px" size="mini">
      <el-form-item label="课程年级:" prop="course_grade">
        <el-input v-model="params.course_grade"></el-input>
      </el-form-item>
      <el-form-item label="课程名称:" prop="course_name">
        <el-input v-model="params.course_name"></el-input>
      </el-form-item>
      <el-form-item label="课程学分:" prop="course_credit">
        <el-input v-model="params.course_credit"></el-input>
      </el-form-item>
      <el-form-item label="授课老师:" prop="course_teacher_id">
        <el-select clearable v-model="params.course_teacher_id">
          <el-option
            v-for="t in teachers"
            :key="t.teacher_id"
            :label="t.count_text"
            :value="t.teacher_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上课时间:" prop="course_time">
        <div class="inline-input">
          <el-select clearable v-model="course_time_obj.week">
            <el-option
              v-for="(w, i) in weeks"
              :key="i"
              :label="w"
              :value="i"
              :disabled="i == 0 || i == 6"
            ></el-option>
          </el-select>
          <el-select clearable v-model="course_time_obj.start">
            <!-- v-for 循环数值得时候，产生得(item,index)变量，item从1开始，index从0开始 -->
            <el-option
              v-for="(item, i) in 9"
              :key="i"
              :value="i"
              :label="`第${item}节课`"
            ></el-option>
          </el-select>
          <el-select clearable v-model="course_time_obj.end">
            <el-option
              v-for="item in 4"
              :key="item"
              :value="item"
              :label="`共${item}节`"
            ></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="上课地点:" prop="course_location">
        <el-input v-model="params.course_location"></el-input>
      </el-form-item>
      <el-form-item label="座位数:" prop="course_max_size">
        <el-input v-model="params.course_max_size"></el-input>
      </el-form-item>
      <el-form-item label="考试时间:" prop="course_exam_date">
        <!-- 默认得选择后数据，会自动得创建为JS得 new Date() 对象 -->
        <el-date-picker
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd hh:mm:dd"
          v-model="params.course_exam_date"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="考试地点:" prop="course_exam_location">
        <el-input v-model="params.course_exam_location"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button size="mini" @click="change()">取消</el-button>
      <el-button type="primary" size="mini" @click="confirm()">更新</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { weeks } from "@/constant";
import courseRules from "@/rules/courseRules.js";
import { selectTeacherOptions } from "@/api";
import { updateCourseById } from "@/api/course";
export default {
  data() {
    return {
      courseRules,
      weeks,
      teachers: [],
      teacher_txt: "",
      course_time_obj: {
        week: "",
        start: "",
        end: "",
      },
      params: {
        // 该参数用于表示更新那个数据
        course_id: "",
        course_teacher_id: "",
        course_name: "",
        course_grade: "",
        // 请求用得参数
        course_time: "",
        course_location: "",
        course_credit: "",
        course_max_size: "",
        course_exam_date: "",
        course_exam_location: "",
      },
    };
  },
  watch: {
    "params.course_teacher_id": function (nv) {
      // 判断参数提供的 course_teacher_id 在异步请求加载的老师列表中是否存在
      let flag = this.teachers.some((item) => item.teacher_id == nv);

      if (!flag) {
        // 如果不存在
        this.teachers.push({
          teacher_id: nv,
          count_text: this.teacher_txt,
        });
      }
    },
    course_time_obj: {
      handler: function (nv) {
        this.params.course_time = `${nv.week}-${nv.start}-${nv.end}`;
      },
      deep: true,
    },
  },
  methods: {
    async initTeacherOptions() {
      let { data } = await selectTeacherOptions({
        teacher_name: "",
      });
      this.teachers = data;
    },
    change() {
      this.$emit("update:visible", false);
    },
    async confirm() {
      await this.$refs.form.validate();
      await updateCourseById(this.params);
      this.$emit("reload");
      this.$emit("update:visible", false);
      this.params = {};
    },
  },
  created() {
    this.initTeacherOptions();
  },
};
</script>

<style lang="scss" scoped>
.inline-input {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}
.el-select,
.el-date-editor {
  display: block;
  flex-grow: 1;
  width: 100%;
}
</style>
